<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'LgForm',
  // 使用provide传递组件对象，供表单项获取相关数据。
  // 不使用$parent是由于组件使用由用户书写可能会存在多级嵌套的问题，表单项不一定时该组件的直系子组件
  provide () {
    return {
      form: this
    }
  },
  // 接收外部传入的数据
  props: {
    model: {
      type: Object
    },
    rules: {
      type: Object
    }
  },
  methods: {
    // 验证所有表单项规则，接收一个回调函数
    validate (cb) {
      // 获取所有具有所有的prop的子组件，并遍历调用这些子组件的validate方法
      // 接收所有子组件validate后返回的promise
      const tasks = this.$children
        .filter(child => child.prop)
        .map(child => child.validate())

      // 使用promise.all确定所有的validate执行状态
      Promise.all(tasks)
      // 都执行成功调用回调函数并传入true
        .then(() => cb(true))
        // 有任一不成功则调用回调函数传入false
        .catch(() => cb(false))
    }
  }
}
</script>

<style>

</style>
